<template>
    <div>
        <div style="display: flex;">
            <el-button type="primary" id="but" @click="add">
                新增检测人员
            </el-button>
            <el-button type="primary" id="but" @click="deleteAll()">
                批量删除
            </el-button>
        </div>
        <el-table :data="currentPageData" style="width: 100%;font-size: 20px;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="stuNo" label="ID" width="120" />
            <el-table-column property="stuName" label="值班人员" width="200" />
            <el-table-column property="image" label="监控实时图" width="180">
                <template #default="scope">
                    <img :src="scope.row.image" alt="" width="100" />
                </template>
            </el-table-column>
            <el-table-column property="bourn" label="监控分布位置" width="190" />
            <el-table-column property="switch" label="门禁情况" width="250">
                <template #default="scope">
                    <el-switch v-model="scope.row.switch" inline-prompt active-text="已打卡" inactive-text="未打卡" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="600">
                <template #default="scope">
                    <el-button id="but1" @click="watchCha(scope.$index, scope.row)">
                        查看
                    </el-button>
                    <el-button id="but1" @click="edit(scope.$index, scope.row)">
                        修改
                    </el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                        icon-color="#626AEF" title="你确定要删除吗?" @confirm="del(scope.$index, scope.row.stuNo)"
                        @cancel="cancelEvent">
                        <template #reference>
                            <el-button id="but1">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage"
            layout="prev,pager,next" :total="filteredCount" :page-size="pageSize" style="font-size: 20px;" />

        <el-dialog v-model="dialogVisible" :title="flag ? '新增' : '编辑'" width="500">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="ID" v-if="flag == false">
                    <el-input v-model="ruleForm.stuNo" type="text" autocomplete="off" :disabled="flag == false" />
                </el-form-item>
                <el-form-item label="检测人员">
                    <el-input v-model="ruleForm.stuName" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="检测实时图">
                    <el-input v-model="ruleForm.image" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="检测区域">
                    <el-input v-model="ruleForm.bourn" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="环境检测状态">
                    <el-switch v-model="ruleForm.switch" inline-prompt active-text="已打卡" inactive-text="未打卡" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">
                        确定
                    </el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogVisible1" title="查看" width="500">
          <el-form ref="ruleFormRefs" style="max-width: 600px" :model="ruleForms" status-icon label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="ID" v-if="flag == false">
                    <el-input v-model="ruleForms.stuNo" type="text" autocomplete="off" :disabled="flag == false" />
                </el-form-item>
                <el-form-item label="检测人员">
                    <el-input v-model="ruleForms.stuName" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="检测实时图">
                    <el-input v-model="ruleForms.image" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="检测区域">
                    <el-input v-model="ruleForms.bourn" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="环境检测状态">
                    <el-switch v-model="ruleForms.switch" inline-prompt active-text="已打卡" inactive-text="未打卡" />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Security_list } from '@/request';
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
const SecurityData = ref([])
// 获取安防管理数据 
const Intell_Init = () => {
    Security_list().then(res => {
        console.log(res)
        // 接收安防管理返回的数据
        SecurityData.value = res.data.data.result[0].list
        console.log('安防管理', SecurityData.value)
    })
}

onMounted(() => {
    Intell_Init()
})
// 分页
const currentPage = ref(1)
const pageSize = ref(5)
const filteredCount = computed(() => SecurityData.value.length)

const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return SecurityData.value.slice(start, end)
})
const currentChange = (page: number) => {
    currentPage.value = page
}
const sizeChange = (newPageSize: number) => {
    pageSize.value = newPageSize
    currentPage.value = 1
}
// 数据类型 
interface User {
    // id: number,
    stuNo: string,
    stuName: string,
    image: string,
    bourn: string,
    switch: boolean,
}
interface Users {
    // id: number,
    stuNo: string,
    stuName: string,
    image: string,
    bourn: string,
    switch: boolean,
}
// 删除 
const del = (index: number, row: User) => {
    SecurityData.value.forEach((item) => {
        if (item.stuNo === row) {
            SecurityData.value.splice(index, 1)
            ElMessage.success('删除成功！')
        }
    })
}
const cancelEvent = () => {
    ElMessage.error('删除失败！')
}
// 新增 
const dialogVisible = ref(false)
const flag = ref(true)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    stuNo: '',
    stuName: '',
    image: '',
    bourn: '',
    switch: ''
})
const ruleFormRefs = ref<FormInstance>()
const ruleForms = reactive({
    stuNo: '',
    stuName: '',
    image: '',
    bourn: '',
    switch: ''
})
const add = () => {
    dialogVisible.value = true
    flag.value=true
    ruleForm.stuNo = ''
    ruleForm.stuName = ''
    ruleForm.image = ''
    ruleForm.bourn = ''
    ruleForm.switch = ''
}
// 定义一个空的新变量存放新学号 
// const Id = ref('')
const submitForm = () => {
    if (flag.value) {
        let newId = new Date().getTime()
        let newImg = 'https://ts1.cn.mm.bing.net/th/id/R-C.4fbba72fb22cb9cc93614aabb65ec709?rik=pEU8lM2hS3QQEA&riu=http%3a%2f%2fwww.toeta.cn%2fUploads%2fueditor%2fimage%2f20201026%2f6373932297769421867375589.jpg&ehk=xsLbhTqjKp66PxDmI1xcyspaE%2fXOf3s606cY3%2fU7hLE%3d&risl=&pid=ImgRaw&r=0'
        SecurityData.value.unshift({ ...ruleForm, stuNo: newId, image: newImg })
    } else {
        let items:any = SecurityData.value.find(item => item.stuNo === ruleForm.stuNo)
       console.log(items)
        items.stuNo = ruleForm.stuNo
        items.stuName = ruleForm.stuName
        items.image = ruleForm.image
        items.bourn = ruleForm.bourn
        items.switch = ruleForm.switch
    }
    dialogVisible.value = false
}
// 修改 
const edit = (index: number, row: User) => {
    dialogVisible.value = true
    flag.value = false
    console.log('修改', index, row)
    ruleForm.stuNo = row.stuNo
    ruleForm.stuName = row.stuName
    ruleForm.image = row.image
    ruleForm.bourn = row.bourn
    ruleForm.switch = row.switch
}
// 查看 
const dialogVisible1=ref(false)
const watchCha=(index: number, row: User)=>{
    dialogVisible1.value = true
    flag.value = false
    console.log('修改', index, row)
    ruleForms.stuNo = row.stuNo
    ruleForms.stuName = row.stuName
    ruleForms.image = row.image
    ruleForms.bourn = row.bourn
    ruleForms.switch = row.switch
}
</script>

<style scoped lang="scss">
#but {
    width: 130px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #214bc9;
    color: #fff;
    font-size: 20px;
}

#but1 {
    width: 80px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #214bc9;
    color: #fff;
    font-size: 20px;
}
</style>
